import EditPatient from '@components/EditPatient';
<template>
    <div class="i-table-no-border">
        <Table highlight-row ref="table" :columns="columns" :data="dataWithPage" :loading="loading" size="small">
            <template slot-scope="{ row }" slot="info">
                <a @click="handleDetailPatient(row)">{{ row.basic }}</a>
            </template>
            <template slot-scope="{ row }" slot="state">
                <Tag v-if="row.state === 0" color="blue">失效</Tag>
                <Tag v-if="row.state === 1" color="volcano">跟进中</Tag>
                <Tag v-if="row.state === 2" color="cyan">预约</Tag>
                <Tag v-if="row.state === 3" color="green">到诊</Tag>
                <Tag v-if="row.state === 4" color="orange">已到老患者</Tag>
            </template>
            <template slot-scope="{ row }" slot="label">
                <Tag v-if="row.label === 0">在乎费用</Tag>
                <Tag v-if="row.label === 1">专家</Tag>
                <Tag v-if="row.label === 2">敏感</Tag>
                <Tag v-if="row.label === 3">远程</Tag>
            </template>
            <template slot-scope="{ row }" slot="channel">
                <Badge v-if="row.channel === 0" status="success" text="微信" />
                <Badge v-if="row.channel === 1" status="processing" text="抖音" />
                <Badge v-if="row.channel === 2" status="error" text="市场转诊" />
                <Badge v-if="row.channel === 3" status="warning" text="自然到诊" />
            </template>
            <template slot-scope="{ row, index }" slot="action">
                <a @click="handleOpenDrawer">编辑</a>
                <!-- <Divider type="vertical" />
                <a @click="handleReturnVisit"> 回访 </a>-->
                <Divider type="vertical" />
                <a @click="handleVisit">撤诊</a>
            </template>
        </Table>
        <div class="ivu-mt iuv-text-center" slot="footer">
            <Page :total="limitData.length" :current.sync="current" show-elevator show-sizer show-total></Page>
        </div>
        <Modal title="到诊确认" v-model="visitModal" @on-ok="ok">
            <Form :label-width="100">
                <FormItem label="患者姓名：">刘志强</FormItem>
                <FormItem label="手机号：">13522565565</FormItem>
                <FormItem label="选择诊室" required>
                    <Select v-width="150">
                        <Option value="一诊">一诊</Option>
                        <Option value="二诊">二诊</Option>
                        <Option value="三诊">三诊</Option>
                        <Option value="四诊">四诊</Option>
                    </Select>
                </FormItem>
                <FormItem label="诊疗号" required>
                    <Input v-width="150" placeholder="请输入患者诊疗号" />
                </FormItem>
                <FormItem label="到诊时间" required>
                    <DatePicker :editable="false" type="datetime" v-width="150"></DatePicker>
                </FormItem>
                <FormItem label="真实姓名" required>
                    <Input v-width="150" placeholder="请输入真实姓名" />
                </FormItem>
            </Form>
        </Modal>
        <patient-detail ref="patientDetail" />
        <edit-patient ref="editPatient" v-if="!loading" />
        <return-visit ref="returnVisit" />
    </div>
</template>
<script>
import random from '@/libs/random_str'
import patientDetail from '@/components/patientDetail'
import editPatient from '@/components/editPatient'
import returnVisit from '@/components/returnVisit'
export default {
    components: { patientDetail, editPatient, returnVisit },
    data() {
        return {
            loading: false,
            modal: false,
            visitModal: false,
            list: [],
            current: 1,
            size: 10,
            showCreate: false,
            creating: true,
            formData: {
                personnel: [],
                Occupation: '',
                Effect: '',
                risk: '',
                Diagnosis: ''
            },
            columns: [
                { title: '基本信息', key: 'basic', slot: 'info', minWidth: 135, fixed: 'left'},
                // { title: '微信号', key: 'wx', minWidth: 108},
                { title: '患者状态', key: 'state', slot: 'state', minWidth: 100},
                { title: '归属人', key: 'belonger', minWidth: 80},
                { title: '已到时间', key: 'arrived', sortable: 'custom', minWidth: 108},
                { title: '回访次数', key: 'numberVisits', sortable: 'custom', minWidth: 108},
                { title: '患者标签', key: 'label', slot: 'label', minWidth: 138},
                { title: '城市', key: 'city', minWidth: 100},
                { title: '病种', key: 'disease', minWidth: 200},
                { title: '来源', minWidth: 120, slot: 'channel'},
                { title: '创建时间', key: 'foundTime', minWidth: 135},
                { title: '备注', minWidth: 150, key: 'remarks'},
                { title: '操作', minWidth: 108, slot: 'action', fixed: 'right'}
            ]
        }
    },
    computed: {
        limitData() {
            let data = [...this.list]
            return data
        },
        dataWithPage() {
            const data = this.limitData
            const start = this.current * this.size - this.size
            const end = start + this.size
            return [...data].slice(start, end)
        }
    },
    methods: {
        mockOneData() {
            const item = {}
            item.basic =
                '刘志强 男' + ' ' + Math.floor(Math.random() * 60 + 15) + '岁'
            item.wx = random(8)
            item.state = Math.floor(Math.random() * 5)
            item.belonger = '高玲'
            item.arrived = '2020-05-21'
            item.channel = Math.floor(Math.random() * 4)
            item.state = Math.floor(Math.random() * 4)
            item.numberVisits = Math.floor(Math.random() * 100)
            item.disease = '白癜风'
            item.dialogue = Math.floor(Math.random() * 3)
            item.city = '上海'
            item.label = Math.floor(Math.random() * 4)
            item.foundTime = '2020-05-01 16:03'
            item.remarks = '备注内容'
            item.operation = Math.floor(Math.random() * 2)
            return item
        },
        getData() {
            this.current = 1
            this.loading = true
            setTimeout(() => {
                let data = []
                for (let i = 0; i < 100; i++) {
                    data.push(this.mockOneData())
                }
                this.list = data
                this.loading = false
            }, 1000)
        },
        handleOpenDrawer() {
            this.$refs.editPatient.handleEdit()
        },
        handleDetailPatient(row) {
            this.$refs.patientDetail.handleOpen()
        },
        handleVisit() {
            this.$Modal.info({
                title: '撤诊确认',
                content: '确定给此患者撤诊吗？',
                onOk: () => {
                    this.$Message.success('撤诊成功')
                }
            })
        },
        ok() {
            this.$Message.success('操作成功')
        }
    },
    mounted() {
        this.getData()
    }
}
</script>
